【JavaScript】switch文 - 条件分岐 / 変数の値による処理の分岐

JavaScriptのswitch文（条件分岐）について解説します。

検証環境

JavaScript -

macOS

14.1

switch文

switch文は“条件分岐を実現する構文”です。

変数の値に応じて、処理を分岐することができ、一般的にbreak文と合わせて使用します。

基本構文

switch( 変数 ) {
    case 条件値１:
        // 処理...
    case 条件値２:
        // 処理...
    default:
        // 処理...
}

基本構文を分解して１つずつ解説します。

先ずswitch(変数){}はswitch文の基本となる構文です。

switch( 変数 ) {
    
}

変数の部分は条件に使う変数です。

次に分岐処理はcase 条件値:を記述します。

switch( 変数 ) {
___ih_diff_start
+    case 条件値:
+        // 処理...
___ih_diff_end
}

条件値の値と変数の値が等しい場合、以降の処理を実行します。

複数の分岐処理は同様にcase 条件値:を追加します。

switch( 変数 ) {
    case 条件値１:
        // 処理...
___ih_diff_start
+    case 条件値２:
+        // 処理...
___ih_diff_end
}

変数の値に関わらず、必ず実行する処理はdefault :で記述します。

switch( 変数 ) {
    case 条件値１:
        // 処理...
    case 条件値２:
        // 処理...
___ih_diff_start
+    default:
+        // 処理...
___ih_diff_end
}

以上がswitch文の基本構文の構造です。

処理の流れ

switch文は先頭（上）から順番に分岐処理の条件値と変数の値が等しいかの真偽を評価します。

真（等しい場合）は、それ以降の処理を全て実行します。

次のswitch文で具体的な流れを確認しましょう。

switch( 変数 ) {
    case 条件値A:
        // 処理A...
    case 条件値B:
        // 処理B...
    case 条件値C:
        // 処理C...
    default:
        // 処理D...
}

例えば、２個目の分岐（case 条件値B:）が真の場合、処理B、処理C、処理Dが実行されます。

３個目の分岐（case 条件値C:）が偽の場合でも、処理Cは実行対象となります。

このように、真となったcase以降の処理は各caseの真偽に関わらず実行されます。

各分岐の処理のみ実行するにはbreak文を合わせて使います。

switch( 変数 ) {
    case 条件値A:
        // 処理A...
___ih_diff_start
+        break;
___ih_diff_end
    case 条件値B:
        // 処理B...
___ih_diff_start
+        break;
___ih_diff_end
    case 条件値C:
        // 処理C...
___ih_diff_start
+        break;
___ih_diff_end
    default:
        // 処理D...
}

break文は一番近いブロック（波括弧{}）の処理を中断するキーワードです。

例えば、２個目の分岐（case 条件値B:）が真の場合、処理Bの後にbreakを実行するため、switch文の処理は終了します。

また、defaultは以降に分岐処理がないため、break文は必要ありません。

このように各caseの最後にbreakを使うことで、if文・else if文・else文のように各分岐処理を独立させて完結することが可能です。

サンプル

sample.js

let num = 3;

___ih_hl_start
switch( num ) {
    case 1 :
        console.log('１個目のcaseです。');
        break;
    case 2 :
        console.log('２個目のcaseです。');
        break;
    case 3 :
        console.log('３個目のcaseです。');
        break;
    default :
        console.log('defaultです。');
}
___ih_hl_end

Console

３個目のcaseです。

３〜１５行目がswitch文です。

変数numの値は3のため、３個目のcaseの条件値に一致し、その処理が実行されます。

また、条件値は最終的に値であれば良いため、式で記述することが可能です。

sample.js

let num = 3;

let condition = 1;

___ih_hl_start
switch( num ) {
    case condition + 1 :
        console.log('１個目のcaseです。');
        break;
    case condition + 2 :
        console.log('２個目のcaseです。');
        break;
    case condition + 3 :
        console.log('３個目のcaseです。');
        break;
    default :
        console.log('defaultです。');
}
___ih_hl_end

Console

２個目のcaseです。

breakの有無

break文の有無による動作の違いを確認します。

上記サンプルからbreakを削除したソースコードを実行します。

sample.js

let num = 3;

let condition = 1;

switch( num ) {
    case condition + 1 :
        console.log('１個目のcaseです。');
___ih_diff_start
-        break;
___ih_diff_end
    case condition + 2 :
        console.log('２個目のcaseです。');
___ih_diff_start
-        break;
___ih_diff_end
    case condition + 3 :
        console.log('３個目のcaseです。');
___ih_diff_start
-        break;
___ih_diff_end
    default :
        console.log('defaultです。');
}

Console

２個目のcaseです。
３個目のcaseです。
defaultです。

先ほどと実行結果が変わりました。

これはbreakが無いことによって、swtich文の処理が中断されず、３個目のcaseとdefaultの処理が実行されたためです。

この特性を活かすことも可能ですが、一般的にはbreak文でcaseごとに処理を独立させます。

if文とswitch文

if文とswitch文はどちらも条件分岐の役割を担います。

一般的に多くの条件分岐ではif文が使用されますが、“１つの変数の値に応じた条件分岐”はswitch文の方が適している場合があります。

例えば、上記サンプル（break文を含む）をif文で書き換えると次のようになります。

sample.js

let num = 3;

if( num == 1 ) {
    console.log('１個目のcaseです。');
}
else if( num == 2 ) {
    console.log('２個目のcaseです。');
}
else if( num == 3 ) {
    console.log('３個目のcaseです。');
}
else {
    console.log('defaultです。');
}

Console

３個目のcaseです。

全ての条件式にnum ==を含み、一見して変数numの値に対する条件分岐であることが分かりづらくなりました。

if文は自由度が高く、複雑な条件式を組むことが可能ですが、１つひとつの条件式の内容を確認しなければなりません。

また、もし変数名を変更する場合、各条件式を修正する必要があります。

このように変数の値に対して条件分岐する場合はswitch文の方が適していると言えます。

注意点

switch文の条件値に条件式を記述できますが、意図しない動作が発生する可能性があるので注意が必要です。

sample.js

let num = 0;

switch( num ) {
    case num >= 0 :
        console.log('１個目のcaseです。');
        break;
    case num >= 10 :
        console.log('２個目のcaseです。');
        break;
    case num >= 20 :
        console.log('３個目のcaseです。');
        break;
    default :
        console.log('defaultです。');
}

Console

defaultです。

このコードは一見、１個目のcaseが実行されるように見えますが、実際にはdefaultが実行されます。

switch文は変数の値と条件値を比較演算子でいうところの===で等しいかどうかを判定します。

そのため、１個目のcaseの条件値num >= 0はtrueであり、変数numの値と等しくありません。

同様にいずれのcaseにも該当しないため、defaultの処理が実行されるようになっています。